<template>
  <div id="content-layout">
    <content-header :routerbread="routerbread"></content-header>
    <div class="content-layout-viewer">
      <slot>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" :key="this.$route.name" v-if="this.$route.meta.keepAlive"/>
          </keep-alive>
          <component :is="Component" :key="this.$route.name" v-if="!this.$route.meta.keepAlive"/>
        </router-view>
      </slot>
    </div>
<!--    <div class="content-layout-viewer">-->
<!--      <router-view v-slot="{ Component }">-->
<!--        <keep-alive>-->
<!--          <component :is="Component" :key="this.$route.name" v-if="this.$route.meta.keepAlive"/>-->
<!--        </keep-alive>-->
<!--        <component :is="Component" :key="this.$route.name" v-if="!this.$route.meta.keepAlive"/>-->
<!--      </router-view>-->
<!--    </div>-->
  </div>
</template>

<script>
  import ContentHeader from './components/ContentHeader'
  export default {
    name: 'ContentLayout',
    components: {
      ContentHeader
    },
    data () {
      return {
        routerbread: this.routerName()
      }
    },
    methods: {
      routerName () {
        const len = this.$route.name.split('-').length

        if (this.$route.meta.i18n) {
          if (len === 3) {
            return [this.$t(this.$route.matched[0].meta['title']),this.$t(this.$route.matched[1].meta['title']),this.$t(this.$route.meta['title'])]
          } else {
            return [this.$t(this.$route.matched[0].meta['title']),this.$t(this.$route.meta['title'])]
          }
        } else {
          if (len === 3) {
            return [this.$route.matched[0].meta['title'],this.$route.matched[1].meta['title'],this.$route.meta['title']]
          } else {
            return [this.$route.matched[0].meta['title'],this.$route.meta['title']]
          }
        }
      }
    },
    watch: {
      '$route.path': {
        handler: function(newVal, oldVal) {
          this.routerbread = this.routerName()
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  #content-layout{
    width: 100%;
    height: 100%;
    .content-layout-viewer{
      width: 100%;
      background: #FFFFFF;
      height: calc(100% - 48px);
      overflow: auto;
    }
  }
</style>
